<template>
  <lk-dialog
    class="vs-dialog-global bg-shield"
    :visible="showGlobalDialog"
    :title="GlobalDialog.title"
    width="700px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @close="closeAction"
  >
    <div class="inner">
      <div
        class="msg"
        :class="{
          'red-text': GlobalDialog.errorMsg,
          'msg-center': GlobalDialog.centerMsg
        }"
        v-html="GlobalDialog.msg"
      ></div>
      <el-alert v-if="GlobalDialog.errorMsg" :closable="false">
        错误信息：{{ GlobalDialog.errorMsg }}
      </el-alert>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="okAction">我知道了</el-button>
    </div>
  </lk-dialog>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  name: 'GlobalDialog',
  props: {},
  components: {

  },
  // 定义属性
  data () {
    return {
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapGetters({
      showGlobalDialog: 'globalDialog/showGlobalDialog',
      GlobalDialog: 'globalDialog/GlobalDialog'
    })
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    ...mapMutations({
      hide: 'globalDialog/hide'
    }),
    okAction () {
      if (this.GlobalDialog.redirect) {
        window.location.href = this.GlobalDialog.redirect;
      } else {
        this.hide();
      }
    },
    closeAction () {
      if (this.showGlobalDialog) {
        this.hide();
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
